<template>
	<view class="add-device">
		<view class="buzhou acea-row row-column row-middle row-center">
			<view class="acea-row row-middle row-center">
				<view class="cricle on acea-row row-middle row-center">1</view>
				<view class="line-c"></view>
				<view class="cricle acea-row row-middle row-center" :class="success==0?'on':''">2</view>
			</view>
			<view class="acea-row row-between-wrapper" style="width: 530rpx;">
				<view class="fs-24 color333 mt10">设备信息</view>
				<view class="fs-24 mt10" :class="success==0?'color333':'no'">绑定成功</view>
			</view>
		</view>
		
		<block v-if="success">
			<view class="input-box mt30 acea-row row-between-wrapper">
				<view class="fs-32 color333 bold">备注名称</view>
				<input type="text" v-model="mark" placeholder="输入备注名称" placeholder-class="ploc">
			</view>
			
			<view class="input-box mt30 acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<image class="device-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/device-icon.png" mode="aspectFit"></image>
					<view class="fs-32 color333 bold ml10">选择设备</view>
				</view>
				<view class="acea-row row-middle ploc" @tap="open">
					<text class="fs-26 color333" style="width: 350rpx; text-align: right;" v-if="deviceName">{{ deviceName }}</text>
					<text v-else>点击选择</text>
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			
			<view class="saoma-box mt30">
				<view class="fs-32 color333 bold">输入设备序列号绑定</view>
				<view class="mt30 code acea-row row-between-wrapper" @tap="saocode">
					<input type="text" v-model="imei" placeholder="输入设备序列号" placeholder-class="ploc" disabled/>
					<text class="iconfont icon-saoyisaosaoma" ></text>
				</view>
			</view>
			
			<view class="confrim acea-row row-middle row-center" @tap="off">确认</view>
		</block>
		
		<block v-else>
			<view class="acea-row row-middle row-center bold color333 mt40 fs-40">设备绑定成功</view>
			<view class="acea-row row-middle row-center mt40">
				<image class="success-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/success-icon.png" mode="aspectFit"></image>
			</view>
			<view class="bangding-nav">
				<view class="fs-30 color333 bold">设备信息</view>
				<view class="acea-row row-between-wrapper bor-bot py30 fs-28">
					<view class="color666">备注名称：</view>
					<view class="color333" style="width: 450rpx;text-align: right;">{{ mark }}</view>
				</view>
				<view class="acea-row row-between-wrapper bor-bot py30 fs-28">
					<view class="color666">设备：</view>
					<view class="color333" style="width: 400rpx;text-align: right;">{{ deviceName }}</view>
				</view>
				<view class="acea-row row-between-wrapper py30 fs-28">
					<view class="color666">设备序列号：</view>
					<view class="color333" style="width: 400rpx;text-align: right;">{{ imei }}</view>
				</view>
			</view>
			<!-- <view class="jiebang">解绑设备</view> -->
			<view class="btnback" @tap="back">返回设备列表</view>
		</block>
		
		<uni-popup type="bottom" ref="popup">
			<view class="device-pop">
				<view class="acea-row row-between-wrapper bor-bot p30">
					<view class="bold fs-30 color333">选择设备类别</view>
					<view class="iconfont icon-guanbi" @tap="close"></view>
				</view>
				<scroll-view class="scroll-nav" scroll-y="true">
					<block v-for="(item,index) in typelist" :key="index">
						<view class="deviceName" @tap="devicetype(item)">
							{{ item.deviceName }}
						</view>
					</block>
				</scroll-view>
			</view>
		</uni-popup>
		
		<uni-popup type="center" ref="center">
			<view class="tips-nav">
				<view class="acea-row row-center title">温馨提示</view>
				<view class="name">
					您确定绑定{{ deviceName }}吗
				</view> 
				<view class="acea-row row-around mt40">
					<view class="btn acea-row row-middle row-center" @tap="cancel">取消</view>
					<view class="btn on acea-row row-middle row-center" @tap="confrim">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import{
		deviceTypeList,
		bindDevice
	} from '@/api/admin.js'
	export default {
		data() {
			return {
				imei:'',
				shebei_id:'',
				mark:'',
				id:'',
				deviceName:'',
				typelist:[],
				success: 1,
				
			};
		},
		onLoad() {
			this.getType();
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			cancel(){
				this.$refs.center.close();
			},
			off(){
				this.$refs.center.open();
			},
			confrim(){
				let that = this;
				let data = {
					imei : that.imei,
					shebei_id : that.shebei_id,
					id:'',
					mark: that.mark
				}
				if( !data.mark ) return that.$util.Tips({ title : '请输入备注名称' });
				if( !data.imei ) return that.$util.Tips({ title : '请输入设备序列号' });
				bindDevice(data).then(res=>{
					that.$util.Tips({ title : res.msg },()=>{
						that.cancel();
						that.success = !that.success;
					})
				}).catch(err=>{
					that.$util.Tips({ title : err })
				})
			},
			devicetype(item){
				let that = this;
				that.deviceName = item.deviceName;
				that.shebei_id = item.shebei_id;
				that.close();
			},
			getType(){
				deviceTypeList().then(res=>{
					this.typelist = res.data.data;
				})
			},
			saocode(){
				let that = this;
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.$set(that,'imei',res.result)
					}
				});
			},
			open(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss">
	.add-device{
		padding: 30rpx;
		
		.buzhou{
			width: 690rpx;
			height: 188rpx;
			background-color: #ffffff;
			border-radius: 40rpx;
			
			.line-c{
				width: 376rpx;
				height: 1rpx;
				background-color: #D8D8D8;
				// border: 1px solid #D8D8D8;
			}
			
			.cricle{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #E4E4E4;
				color: #BCBCBC;
				font-size: 30rpx;
				
				&.on{
					color: #ffffff;
					background: linear-gradient(180deg, #FF965D 0%, #FF7C33 100%);
				}
			}
			.no{
				color: #BCBCBC;
			}
			
		}
		
		.input-box{
			width: 690rpx;
			min-height: 120rpx;
			border-radius: 40rpx;
			background-color: #ffffff;
			padding: 0 30rpx;
			
			input{
				text-align: right;
			}
			
			.ploc{
				color: #909090;
				font-size: 28rpx;
			}
			
			.device-icon{
				width: 60rpx;
				height: 60rpx;
			}
		}
		
		.saoma-box{
			width: 690rpx;
			// height: 254rpx;
			border-radius: 40rpx;
			background-color: #ffffff;
			padding: 40rpx 30rpx;
			
			.code{
				width: 616rpx;
				height: 84rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 2rpx solid #FD7D36;
				padding: 0 20rpx;
			}
		}
		
		.confrim{
			width: 614rpx;
			height: 104rpx;
			border-radius: 60rpx;
			background: rgba(253, 125, 54, 0.2);
			color: #FD7D36;
			font-size: 30rpx;
			 margin: 200rpx auto 0 auto;
		}
		
		.device-pop{
			width: 100%;
			// height: 500rpx;
			background-color: #ffffff;
			
			.icon-guanbi{
				font-size: 50rpx;
			}
			
			.scroll-nav{
				width: 100%;
				max-height: 800rpx;
				padding: 30rpx 0;
				
				.deviceName{
					color: #333333;
					font-size: 30rpx;
					text-align: center;
					padding-bottom: 30rpx;
				}
			}
		}
		
		.tips-nav{
			width: 620rpx;
			// height: 534rpx;
			border-radius: 52rpx;
			background: #FFFFFF;
			padding: 30rpx;
			
			.title{
				color: #FD7D36;
				font-size: 40rpx;
			}
			.name{
				color: #333333;
				font-size: 48rpx;
				margin-top: 30rpx;
				text-align: center;
			}
			.btn{
				width: 220rpx;
				height: 80rpx;
				border-radius: 60rpx;
				background: #D8D8D8;
				color: #9E9E9E;
				font-size: 32rpx;
				
				&.on{
					background: rgba(253, 125, 54, 0.3);
					color: #FD7D36;
				}
			}
		}
		
		.success-icon{
			width: 192rpx;
			height: 192rpx;
		}
		
		.bangding-nav{
			width: 690rpx;
			border-radius: 40rpx;
			background-color: #ffffff;
			margin: 40rpx 0;
			padding: 40rpx;
		}
		
		.jiebang{
			width: 690rpx;
			height: 104rpx;
			border-radius: 60rpx;
			background: rgba(253, 130, 62, 0.2);
			color: #FD823E;
			text-align: center;
			line-height: 104rpx;
			font-size: 32rpx;
		}
		.btnback{
			width: 690rpx;
			height: 104rpx;
			border-radius: 60rpx;
			background: rgba(193, 193, 193, 0.35);
			color: #9B9B9B;
			text-align: center;
			line-height: 104rpx;
			font-size: 32rpx;
			margin-top: 40rpx;
		}
		
		
	}
</style>
